<script setup lang="ts">
import { h, ref, render } from 'vue'
import { NAvatar, NTag, NSpace, NIcon, NButton } from 'naive-ui'
import { BrandGooglePlay, Bug, InfoSquare, DotsVertical } from '@vicons/tabler'
import FlexibleCard from '@/components/flexible-card.vue'
import router from '@/router'

interface Tag {
  label: string
  type: string
}

interface Props {
  avatarSrc: string
  name: string
  tags: Tag[]
  description: string
  createdAt: string
  executionCount: number
  lastExecAt: string
}

const props = withDefaults(defineProps<Props>(), {
  avatarSrc: '',
  name: '',
  tags: () => [],
  description: '',
  createdAt: '1970-01-01',
  executionCount: 0,
  lastExecAt: '1970-01-01'
})

const handleExecute = () => {
  console.log('立即执行')
  // 这里可以添加执行逻辑
}

const handleDebug = () => {
  console.log('调试执行')
  // 这里可以添加调试逻辑

  router.push({
    name: 'build',
    params: {
      pathMatch: '125555555' // 或者其他符合 [0-9]+ 模式的数字
    }
  })
}

const handleActionSelect = (key: string) => {
  if (key === 'copy') {
    console.log('copy')
  } else if (key === 'delete') {
    console.log('delete')
  }
}

const options = [
  {
    label: '复制应用',
    key: 'copy',
    icon: () => h(NIcon, null, { default: () => h(InfoSquare) })
  },
  {
    label: '删除应用',
    key: 'delete',
    props: {
      style: 'color: red;'
    },
    icon: () =>
      h(
        NIcon,
        {
          class: 'color-red'
        },
        { default: () => h(Bug) }
      )
  }
]
</script>
<template>
  <FlexibleCard
    class="app-item"
    :avatarSrc="props.avatarSrc"
    :name="props.name"
    :description="props.description"
    :isActionHover="true"
  >
    <template #subtitle>
      <n-space size="small">
        <n-tag v-for="tag in props.tags" :key="tag.label" :type="tag.type" size="tiny">
          {{ tag.label }}
        </n-tag>
      </n-space>
    </template>

    <template #action>
      <n-Dropdown :options="options" @select="handleActionSelect">
        <n-button text size="small">
          <n-icon size="20"> <DotsVertical /> </n-icon>
        </n-button>
      </n-Dropdown>
    </template>

    <template #footer>
      <div class="project-footer">
        <div class="project-meta">
          <n-tooltip trigger="hover" raw :show-arrow="false" placement="bottom">
            <template #trigger>
              <NIcon size="20"> <InfoSquare /> </NIcon>
            </template>
            <div class="p-10px bg-white color-gray-800 rounded flex-col">
              <span>创建时间:{{ props.createdAt }}</span>
              <span>最后执行:{{ props.lastExecAt }}</span>
              <span> 已执行{{ props.executionCount }} 次 </span>
            </div>
          </n-tooltip>
        </div>
        <div class="project-actions">
          <button class="action-button debug" @click="handleDebug">
            <n-icon size="24"><Bug /></n-icon>
            <span>调试执行</span>
          </button>
          <button class="action-button execute" @click="handleExecute">
            <n-icon size="24"><BrandGooglePlay /></n-icon>
            <span>立即执行</span>
          </button>
        </div>
      </div>
    </template>
  </FlexibleCard>
</template>
<style scoped lang="scss">
// Variables
$primary-color: #155aef;
$bg-color: white;
$text-color: #333;
$gray-color: #808080;
$light-gray: #f5f5f5;
$border-radius: 8px;

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin hover-effect {
  transition: all 0.3s ease;
  &:hover {
    background-color: rgba($primary-color, 0.08);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin hover-effect {
  transition: all 0.3s ease;
  &:hover {
    background-color: rgba($primary-color, 0.08);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }
}
.app-item {
  &:hover {
    .project-footer {
      display: flex;
    }
  }
}
.project-footer {
  padding-top: 10px;
  width: 100%;
  display: none;
  justify-content: space-between;
  font-size: 12px;
  color: $gray-color;
}
.project-meta {
  font-size: 12px;
  color: $gray-color;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  justify-content: center;

  .separator {
    margin: 0 5px;
  }
  .execution-count {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}

.project-actions {
  @include flex-center;
  gap: 10px;
  height: 100%;
  .action-button {
    @include flex-center;
    gap: 5px;
    cursor: pointer;
    font-size: 12px;
    color: $text-color;
    background: none;
    border: none;
    padding: 5px 10px;
    border-radius: $border-radius;
    @include hover-effect;

    &.execute {
      color: $primary-color;
    }

    &.debug {
      color: $gray-color;
    }
  }
}
</style>
